<template>
  <div>
    <el-container>
      <el-header>
        <h1>控制台效果</h1>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="24">
            <el-card>
              <div class="console">
                <div
                  class="console-line"
                  v-for="(line, index) in consoleLines"
                  :key="index"
                  :class="{
                    'animate__animated animate__fadeIn':
                      index === consoleLines.length - 1,
                  }"
                >
                  {{ line }}
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="24">
            <form class="row" @submit.prevent="greet">
              <input
                id="greet-input"
                v-model="name"
                placeholder="Enter a name..."
              />
              <button type="submit">Greet</button>
            </form>
            <p>{{ greetMsg }}</p>
          </el-col>
        </el-row>
      </el-main>
      <el-footer>
        <p>欢迎来到控制台效果！</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/core";

import TauriLog from "@/tauri/hooks/log";

const { info } = TauriLog();
info("我来了");
const greetMsg = ref("");
const name = ref("");
async function greet() {
  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
  greetMsg.value = await invoke("greet", { name: name.value });
}
</script>
<script>
export default {
  name: "ConsoleInterface",
  data() {
    return {
      consoleLines: [
        "Welcome to the console!",
        "This is a cool console interface.",
        "You can type commands here.",
        "Press Enter to execute.",
      ],
    };
  },
};
</script>

<style scoped>
.el-header {
  background-color: #409eff;
  color: #fff;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #f0f0f0;
  color: #333;
  padding: 20px;
}

.el-footer {
  background-color: #409eff;
  color: #fff;
  text-align: center;
  line-height: 60px;
}

.console {
  background-color: #000;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

.console-line {
  margin-bottom: 10px;
}

h1 {
  text-align: center;
}

input,
button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  transition: border-color 0.25s;
}

button {
  cursor: pointer;
}

button:hover {
  border-color: #396cd8;
}
button:active {
  border-color: #396cd8;
  background-color: #e8e8e8;
}

input,
button {
  outline: none;
}

#greet-input {
  margin-right: 5px;
}
</style>
